@if (showCompletionInfo && completion) {
    @if (completion.istrackeduser) {
        @if (completion.isautomatic) {
            @if (!completed) {
                <ion-button class="completioninfo completion_incomplete chip ion-text-nowrap" fill="outline"
                    (click)="completionClicked($event)">
                    {{ 'core.course.todo' | translate }}
                    <div class="select-icon" role="presentation" aria-hidden="true">
                        <div class="select-icon-inner"></div>
                    </div>
                </ion-button>
            } @else {
                <ion-button class="completioninfo completion_complete chip ion-text-nowrap" color="success"
                    (click)="completionClicked($event)">
                    <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                    {{'core.course.done' | translate }}
                    <div class="select-icon" role="presentation" aria-hidden="true">
                        <div class="select-icon-inner"></div>
                    </div>
                </ion-button>
            }
        } @else {
            @if (completed) {
                <ion-button color="success" [ariaLabel]="accessibleDescription" (click)="completionClicked($event)"
                    class="completioninfo completion_complete chip ion-text-nowrap">
                    <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                    {{ 'core.course.completion_manual:done' | translate }}
                    @if (completion.offline) {
                        <ion-icon name="fas-arrows-rotate" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
                            slot="end" />
                    }
                </ion-button>
            } @else {
                <ion-button fill="outline" [ariaLabel]="accessibleDescription" (click)="completionClicked($event)"
                    class="completioninfo completion_incomplete chip ion-text-nowrap">
                    {{ 'core.course.completion_manual:markdone' | translate }}
                    @if (completion.offline) {
                        <ion-icon name="fas-arrows-rotate" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
                            slot="end" />
                    }
                </ion-button>
            }
        }
    } @else {
        @if (completion.isautomatic) {
            <ion-button fill="outline" class="chip ion-text-nowrap" (click)="completionClicked($event)">
                {{ 'core.course.completionmenuitem' | translate }}
                <div class="select-icon" role="presentation" aria-hidden="true">
                    <div class="select-icon-inner"></div>
                </div>
            </ion-button>
        } @else {
            <ion-button fill="outline" [ariaLabel]="accessibleDescription" disabled
                class="completioninfo completion_incomplete chip ion-text-nowrap">
                {{ 'core.course.completion_manual:markdone' | translate }}
            </ion-button>
        }
    }
}
